<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_分区元素</title>
</head>
<body>
    <!--1.行内分区元素 span没有额外的文字效果 不会换行 只是将文本的一部分内容选中-->
    <h1>大家中午好！欢迎大家进入Java方向的<span style="color: red;">第三阶段</span>进行学习！</h1>
    今天是<span style="color: blue;">2025年8月20日</span>,星期<span style="color: green ;">三</span>,天气<span style="color: orange">晴</span>
    <hr>
    <!--2.块级分区元素 div 会换行，独占一行-->
    <div>块级分区元素</div>
    <div>块级分区元素</div>
    <div>块级分区元素</div>
    <hr>
    <!--旧版-->
    <div class="header">我是头部</div>
    <div class="nav">我是导航栏</div>
    <div class="main">我是主体</div>
    <div class="footer">我是尾部</div>
    <hr>
    <!--新版-->
    <header>我是头部</header>
    <nav>我是导航栏</nav>
    <main>我是主体</main>
    <footer>我是尾部</footer>
</body>
</html>